<div class="w-full h-[calc(100dvh-10.5rem)] md:h-[calc(100dvh-11.65rem)] overflow-y-auto border rounded-lg enclosing-container">

  <div class="p-4 pt-6 min-w-[50rem]">
    <p class="text-lg pb-4 pt-2">Auto-Download Metadata for Files in BookDrop Folder:</p>

    <div class="flex flex-col gap-4 pl-6">

      <div class="flex items-center gap-4">
        <p-toggleswitch
          [(ngModel)]="metadataDownloadOnBookdrop"
          (onChange)="onMetadataDownloadOnBookdropToggle($event.checked)">
        </p-toggleswitch>
        <div class="text-sm text-gray-400 flex items-start gap-2">
          <i class="pi pi-exclamation-triangle text-yellow-500 mt-0.5"></i>
          <span>
          Automatically downloads metadata from your configured sources (Amazon, Goodreads, etc.) when files are added to the Bookdrop folder. Use with caution if adding many files at once as metadata fetching can take time.
        </span>
        </div>
      </div>
    </div>
  </div>

  <div class="pb-4">
    <p-divider></p-divider>
  </div>

  <div class="p-4 pt-6 min-w-[50rem]">
    <p class="text-lg pb-4 pt-2">Metadata Persistence:</p>

    <div class="flex flex-col gap-4 pl-6">

      <div class="flex items-center gap-4">
        <label>Write to File</label>
        <p-toggleswitch
          [ngModel]="metadataPersistence.saveToOriginalFile"
          (onChange)="onPersistenceToggle('saveToOriginalFile')">
        </p-toggleswitch>
        <div class="text-sm text-gray-400 flex items-start gap-2">
          <i class="pi pi-exclamation-triangle text-yellow-500 mt-0.5"></i>
          <span>
          Writes metadata directly into the original file. A backup of the metadata and/or cover is created <b>only if enabled below</b>. Proceed with caution, restoration may fail if the file is moved or renamed.
        </span>
        </div>
      </div>

      <div class="flex items-center gap-4">
        <label>Backup Metadata</label>
        <p-toggleswitch
          [ngModel]="metadataPersistence.backupMetadata"
          (onChange)="onPersistenceToggle('backupMetadata')"
          [disabled]="!metadataPersistence.saveToOriginalFile">
        </p-toggleswitch>
        <span class="text-sm text-gray-400">
          Save a JSON copy of the current metadata before writing new data to the file.
        </span>
      </div>

      <div class="flex items-center gap-4">
        <label>Backup Cover</label>
        <p-toggleswitch
          [ngModel]="metadataPersistence.backupCover"
          (onChange)="onPersistenceToggle('backupCover')"
          [disabled]="!metadataPersistence.saveToOriginalFile">
        </p-toggleswitch>
        <span class="text-sm text-gray-400">
          Save a copy of the existing embedded cover image before it is replaced.
        </span>
      </div>

    </div>
  </div>

  <div class="pb-4">
    <p-divider></p-divider>
  </div>

  <div class="p-4">
    <app-metadata-provider-settings></app-metadata-provider-settings>
  </div>

  <div class="pb-4">
    <p-divider></p-divider>
  </div>

  <div class="p-4">
    <p class="text-lg ">
      Quick Book Match Preferences
      <i class="pi pi-info-circle text-sky-600"
         pTooltip="Choose how metadata fields (title, description, authors, categories, cover) are retrieved by setting priority providers. You can apply the same provider settings to all fields or customize them individually. Enable ‘Refresh Covers’ to update book covers, and ‘Merge Categories’ to consolidate categories/genres from all sources while preserving the existing categories/genres in the book."
         tooltipPosition="right"
         style="cursor: pointer;">
      </i>
    </p>
    <app-metadata-advanced-fetch-options
      (metadataOptionsSubmitted)="onMetadataSubmit($event)"
      [currentMetadataOptions]="currentMetadataOptions"
      [submitButtonLabel]="'Save'">
    </app-metadata-advanced-fetch-options>
  </div>

  <div class="pb-4">
    <p-divider></p-divider>
  </div>

  <div class="p-4 pt-4">
    <app-metadata-match-weights-component></app-metadata-match-weights-component>
  </div>

</div>
